<template>
  <!-- 雪场详情页面 -->
 
	
  <view class="snowPackDetail" >

    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="snowPackDetail-content" :style="[{'top': top + 'px'}]">
      <view class="nav">
        <!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
        <scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
          <view class="tab-scroll_box">
            <!-- 选项卡类别列表 -->
            <view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
              :class="{'spd-active':isSpdActive==index}" @click="chenked(index, item.id)">
              {{item.name}}
            </view>
          </view>
        </scroll-view>
      </view>
	  		  <view class="scrolls">
      <view class="spd-tab-content">
        <view class="section">
          <view class="top" id="kfsj">
            <view class="title">营业时间</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress kfsj-box">
            {{slopeIntro.openingTime ?slopeIntro.openingTime: '-'}}
          </view>
        </view>
        <view class="section">
          <view class="top" id="mpxx">
            <view class="title">门票信息</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress mpxx-box">
            {{slopeIntro.ticketPrice?slopeIntro.ticketPrice: '-'}}
          </view>
        </view>
        <view class="section">
          <view class="top" id="xcjs">
            <view class="title">雪场介绍</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress xxjs-box" :class="{xxjsActive:flag}">
            <view class="content_list">
              <rich-text class="ql-editor" :nodes="replaceContent(slopeIntro.introduction)"></rich-text>
            </view>
            <view class="zhezhaoceng" v-if="!flag&&slopeIntro.introduction"></view>
          </view>
		  <!-- 
          <view class="show-or-noshow" v-if="slopeIntro.introduction" @click="showTag">{{flag?"收起":"查看全部"}}
          </view>
		  -->
        </view>

        <view class="section">
          <view class="top" id="lxdh">
            <view class="title">联系电话</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress lxdh-box">
            {{slopeIntro.tel ? slopeIntro.tel:'-'}}
          </view>
        </view>
        <view class="section">
          <view class="top" id="dzxx">
            <view class="title">地址信息</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress dzxx-box">
            {{slopeIntro.address ?slopeIntro.address :'-'}}
          </view>
        </view>
        <view class="section">
          <view class="top" id="xdxx">
            <view class="title">雪道信息</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress">
            <view class="snow-road-num">
              <image src="/myPackageA/static/easyClear/snow-road.png" mode=""></image>
              <view class="srn-title">
                雪道
              </view>
			
              <view class="srn-road-title">
                <view class="junior-road">
                  <view class="r-name junior">
                    初级道
                  </view>
                  <view class="r-num">
                    {{slopeIntro.statisticsVoList[0].num}}条
                  </view>
                </view>
                <view class="mid-road">
                  <view class="r-name mid">
                    中级道
                  </view>
                  <view class="r-num">
                    {{slopeIntro.statisticsVoList[1].num}}条
                  </view>
                </view>
                <view class="senior-road">
                  <view class="r-name senior">
                    高级道
                  </view>
                  <view class="r-num">
                    {{slopeIntro.statisticsVoList[2].num}}条
                  </view>
                </view>
              </view>
			  
              <view class="srn-road-img">
                <view class="" :style="[{'width': redVal+'%'}]" style="height: 4rpx;background-color: #88F79C;"></view>
                <view class="" :style="[{'width': greenVal+'%'}]" style="height: 4rpx;background-color: #5D87ED;">
                </view>
                <view class="" :style="[{'width': yellowVal+'%'}]" style="height: 4rpx;background-color: #303030;">
                </view>
              </view>
              <view class="srn-road-rotate">
                <view class="rotate-item"
                  :class="slopeIntro.statisticsVoList[0].min&&slopeIntro.statisticsVoList[0].max ? '': 'op'">
                  坡度{{slopeIntro.statisticsVoList[0].min}}-{{slopeIntro.statisticsVoList[0].max}}°
                </view>
                <view class="rotate-item"
                  :class="slopeIntro.statisticsVoList[1].min&&slopeIntro.statisticsVoList[1].max ? '': 'op'">
                  坡度{{slopeIntro.statisticsVoList[1].min}}-{{slopeIntro.statisticsVoList[1].max}}°
                </view>
                <view class="rotate-item"
                  :class="slopeIntro.statisticsVoList[2].min&&slopeIntro.statisticsVoList[2].max ? '': 'op'">
                  坡度{{slopeIntro.statisticsVoList[2].min}}-{{slopeIntro.statisticsVoList[2].max}}°
                </view>
              </view>
            </view>

            <view class="snow-pack-img">
              <image :src="slopeIntro.map" mode=""></image>
            </view>

            <!-- 三种雪道 -->
			  <!-- 
            <view class="three-snowroad">
              <view class="junior-road road-box">
                <view class="jr-title road-title">
                  初级道
                </view>
                <view class="jr-list road-list">
                  <view class="roadl-item" v-for="(item, index) in juniorRoadList"
                    @click="toSkiRoadDetail(item.trailId)" :key="index">
                    <view class="rl-img">
                      <image :src="item.photo ? item.photo[0] : ''" mode=""></image>
                      <view class="rl-label" v-if="item.serviceName">
                        {{item.serviceName}}
                      </view>
                    </view>
                    <view class="rl-title">
                      {{item.trailName}}
                    </view>
                  </view>
                </view>
              </view>
              <view class="mid-road road-box">
                <view class="jr-title road-title">
                  中级道
                </view>
                <view class="jr-list road-list">
                  <view class="roadl-item" v-for="(item,index) in midRoadList" @click="toSkiRoadDetail(item.trailId)"
                    :key="index">
                    <view class="rl-img">
                      <image :src="item.photo ? item.photo[0] : ''" mode=""></image>
                      <view class="rl-label" v-if="item.serviceName">
                        {{item.serviceName}}
                      </view>
                    </view>
                    <view class="rl-title">
                      {{item.trailName}}
                    </view>
                  </view>
                </view>
              </view>
              <view class="senior-road road-box">
                <view class="jr-title road-title">
                  高级道
                </view>
                <view class="jr-list road-list">
                  <view class="roadl-item" v-for="(item,index) in seniorRoadList" @click="toSkiRoadDetail(item.trailId)"
                    :key="index">
                    <view class="rl-img">
                      <image :src="item.photo ? item.photo[0] : ''" mode=""></image>
                      <view class="rl-label" v-if="item.serviceName">
                        {{item.serviceName}}
                      </view>
                    </view>
                    <view class="rl-title">
                      {{item.trailName}}
                    </view>
                  </view>
                </view>
              </view>
            </view>
			
			-->
          </view>
        </view>
        <view class="section">
          <view class="top" id="jtfs">
            <view class="title jtfs-title">
              交通方式
			  <!-- 
              <view class="jtfs-sibt-more" @click="toChildPage(4)">
                <image src="/myPackageA/static/easyClear/more.png" mode=""></image>
              </view>
				-->
            </view>
            <view class="split"></view>
          </view>
          <view class="content content_progress jtfs-box">
            <block v-if="travelIntroList.length > 0">
              <view class="travel-list"
                :class="!travelFlag&& travelIntroList.length > 1 ? 'xxjs-height' : 'xxjsActive'">
                <view class="" v-for="(item, index) in travelIntroList.slice(0, 2)" :key="index">
                  <rich-text class="ql-editor" :nodes="replaceContent(item)"></rich-text>
                </view>
                <view class="zhezhaoceng" v-if="!travelFlag && travelIntroList.length > 1"></view>
              </view>
              <view class="show-or-noshow" v-if="travelIntroList.length > 1" @click="showTravelTag">
                {{travelFlag?"收起":"查看全部"}}
              </view>
            </block>
            <block v-else>
              <view class="no-data-box">
                雪场暂不提供交通方式
              </view>
            </block>
          </view>
        </view>
        <view class="section">
          <view class="top" id="xjzl">
            <view class="title xjzl-title">
              雪具租赁
			  	  <!-- 
              <view class="jtfs-sibt-more" @click="toChildPage(6)">
                <image src="/myPackageA/static/easyClear/more.png" mode=""></image>
              </view>
			  	-->
            </view>
            <view class="split"></view>
          </view>
          <view class="content content_progress">
			  <view class="content content_progress lxdh-box">
				  <view>雪场提供雪鞋、雪板、雪杖。</view>
				  <view>其他租赁服务、押金问题请咨询雪场电话。</view>
			  </view>
			  <!--
            <block v-if="skiEquipIntroList.length > 0">
              <view class="equip-list"                :class="!equipFlag&& skiEquipIntroList.length > 1 ? 'xxjs-height' : 'xxjsActive'">
                <view class="" v-for="(item, index) in skiEquipIntroList" :key="index">
                  <rich-text class="ql-editor" :nodes="replaceContent(item)"></rich-text>
                </view>
                <view class="zhezhaoceng" v-if="!equipFlag && skiEquipIntroList.length > 1"></view>
              </view>
              <view class="show-or-noshow" @click="showEquipTag">
                {{equipFlag?"收起":"查看全部"}}  
              </view>
            </block>
            <block v-else>
              <view class="no-data-box">
                雪场暂不提供雪具租赁服务
              </view>
            </block>
			-->
          </view>
        </view>
<view class="section">
          <view class="top" id="xjzl">
            <view class="title xjzl-title">
              教练教学
			  	  <!-- 
              <view class="jtfs-sibt-more" @click="toChildPage(6)">
                <image src="/myPackageA/static/easyClear/more.png" mode=""></image>
              </view>
			  	-->
            </view>
            <view class="split"></view>
          </view>
          <view class="content content_progress">
			  <view class="content content_progress lxdh-box">
				  <view>雪场配有教练团队</view>
				  <view>费用、课程问题请咨询雪具服务大厅或电话咨询雪场</view>
			  </view>
			  <!--
            <block v-if="skiEquipIntroList.length > 0">
              <view class="equip-list"                :class="!equipFlag&& skiEquipIntroList.length > 1 ? 'xxjs-height' : 'xxjsActive'">
                <view class="" v-for="(item, index) in skiEquipIntroList" :key="index">
                  <rich-text class="ql-editor" :nodes="replaceContent(item)"></rich-text>
                </view>
                <view class="zhezhaoceng" v-if="!equipFlag && skiEquipIntroList.length > 1"></view>
              </view>
              <view class="show-or-noshow" @click="showEquipTag">
                {{equipFlag?"收起":"查看全部"}}  
              </view>
            </block>
            <block v-else>
              <view class="no-data-box">
                雪场暂不提供雪具租赁服务
              </view>
            </block>
			-->
          </view>
        </view>





<!-- 
        <view class="section" style="padding: 0 0 0 0; background: transparent;">
          <view class="top" id="jljx" style="background: #fff; padding: 20rpx;border-radius: 20rpx 20rpx 0 0;">
            <view class="title jljx-title">
              教练教学
			   	  <!-- 
              <view class="jtfs-sibt-more" @click="toChildPage(5)">
                <image src="/myPackageA/static/easyClear/more.png" mode=""></image>
              </view>
			
            </view>
          </view>
          <view class="content content_progress jljx-box">
            <view class="hotel-box">
              <block v-if="othersList.length > 0">
                <view class="hotel-item" v-for="(item, index) in othersList" :key="index"  @click="toStoreIntro(item)">
                  <!-- 是否自营 
                  <view class="is-self-employed" v-if="item.roleFlag == 'snow_filed_child'">
                    <image src="/myPackageA/static/easyClear/self.png" mode=""></image>
                    <view class="ise-title">
                      自营
                    </view>
                  </view>
                  <view class="ht-img">
                    <image :src="item.bussinessImg" mode=""></image>
                    <view class="hi-distance">
                      距离滑雪场{{item.ddistanceOf ? item.distanceOf : 0}}公里
                    </view>
                  </view>
                  <view class="hi-content">
                    <view class="hi-name">
                      {{item.bussinessName}}
                    </view>
                    <view class="hi-grade" v-if="item.tag.length > 0">
                      {{item.tag[0]}}
                    </view>
                    <view class="hi-label" v-if="item.childTag.length > 0">
                      <view class="label-item" v-for="(item1,index1) in item.childTag" :key="index1">
                        {{item1}}
                      </view>
                    </view>
                  </view>
                </view>
              </block>
              <block v-else>
                <view class="no-data-box">
                  雪场暂不提供教练教学服务
                </view>
              </block>
            </view>
          </view>
        </view>
		
        <view class="section">
          <view class="top" id="qtfw">
            <view class="title">其他服务</view>
            <view class="split"></view>
          </view>
          <view class="content content_progress">
            <block v-if="otherIntroList.length > 0">
              <view class="other-list" :class="!othersFlag&& otherIntroList.length > 1 ? 'xxjs-height' : 'xxjsActive'">
                <view class="" v-for="(item, index) in otherIntroList" :key="index">
                  <rich-text class="ql-editor" :nodes="replaceContent(item)"></rich-text>
                </view>
                <view class="zhezhaoceng" v-if="!othersFlag&& otherIntroList.length > 1"></view>
              </view>
              <view class="show-or-noshow" @click="showOthersTag">
                {{othersFlag?"收起":"查看全部"}}
              </view>
            </block>
            <block v-else>
              <view class="no-data-box">
                雪场暂不提供其他服务
              </view>
            </block>
          </view>
        </view>
		-->
      </view>
    </view>
	 </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
		  pageHeight:3000,
        // 占比
        redVal: 33.3,
        greenVal: 33.3,
        yellowVal: 33.3,
        isSpdActive: 0,
        childTitle: '雪场详情',
        slopeIntro: {}, //雪场详情介绍
        slopeId: '',
        top: 0,
        travelList: [], //交通方式
        skiEquipList: [], //雪具租赁
        othersList: [], //教练教学
        equipmentList: [ //雪具列表
          {
            id: 1,
            imgUrl: '/myPackageA/static/orderSucceed/play.png',
            title: '双板雪鞋',
          }, {
            id: 2,
            imgUrl: '/myPackageA/static/orderSucceed/play.png',
            title: '单板',
          }, {
            id: 3,
            imgUrl: '/myPackageA/static/orderSucceed/play.png',
            title: 'A1雪道',
          }, {
            id: 4,
            imgUrl: '/myPackageA/static/orderSucceed/play.png',
            title: 'A2雪道',
          },
        ],
        juniorRoadList: [], //初级雪道
        midRoadList: [], //中级雪道
        seniorRoadList: [], //高级雪道
        category: [{
          name: '开放时间',
          id: '#kfsj'
        }, {
          name: '门票信息',
          id: '#mpxx'
        }, {
          name: '雪场介绍',
          id: '#xcjs'
        }, {
          name: '联系电话',
          id: '#lxdh'
        }, {
          name: '地址信息',
          id: '#dzxx'
        }, {
          name: '雪道信息',
          id: '#xdxx'
        }, {
          name: '交通方式',
          id: '#jtfs'
        }, {
          name: '雪具租赁',
          id: '#xjzl'
        }, {
          name: '教练教学',
          id: '#jljx'
        }, {
          name: '其他服务',
          id: '#qtfw'
        }],
        contentScrollW: 0, // 导航区宽度
        scrollLeft: 0, // 横向滚动条位置
        fullHeight: "",
        IsShow: true,
        flag: false,
        index: 0,
        currentindex: 0,
        trailAllList: [], //雪道列表
        // 交通方式富文本
        travelIntroList: [],
        // 雪具富文本
        skiEquipIntroList: [],
        // 其他服务富文本
        otherIntroList: [],
        travelFlag: false,
        othersFlag: false,
        equipFlag: false,
		checklist:[],//选中高度
		a:0,
		b:0,
			  isflag:0,
		 startData: {
		                    clientX: '',
		                    clientY: ''
		                }
						
      }

    },
	onReady(){
		uni.createSelectorQuery().select('.scrolls').boundingClientRect((rect)=>{
		    console.log('xxxxxxxxxxx'+rect.height);
		this.pageHeight=rect.height+700
		}).exec()
					setTimeout(()=>{
							uni.createSelectorQuery().selectAll('.section').boundingClientRect((rect)=>{
							       rect.forEach((item,index) => {
									 
									   this.checklist[index]=item.height
								   })
							   console.log(this.checklist);
								
							}).exec()
								},1000)
		
	},
    onLoad(options) {
      if (options.slopeId) {
        this.slopeId = options.slopeId
      }
      this.getSnowPackIntro() //获取雪场详情信息
      // 获取当前雪场，自营的交通信息
      this.getBusinessList(4)
      // 获取当前雪场，自营的雪具租赁信息
      this.getBusinessList(6)
      // 获取当前雪场,自营的教练教学信息
      this.getBusinessList(5)
      // 获取当前雪场,自营的其他服务信息
      this.getBusinessList(9)
      // 获取当前雪道信息
      this.trailList()
    },
    mounted() {
		
      var that = this;
      //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
      uni.getSystemInfo({
        success: function(res) {
          that.fullHeight = "height:" + res.windowHeight + "px";
        }
      });
      // 获取标题区域宽度，和每个子元素节点的宽度
      that.getScrollW()
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '雪场详情',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '雪场详情',
		    imageUrl: this.img,
		  }
		},
	 fingerstart(e) {
	                this.startData.clientX = e.changedTouches[0].clientX;
	
	                this.startData.clientY = e.changedTouches[0].clientY;
	            },
				   fingerend(e) {
				                const subX = e.changedTouches[0].clientX - this.startData.clientX;
				                const subY = e.changedTouches[0].clientY - this.startData.clientY;
				                if (subY > 50 || subY < -50) {
				                    if (subY > 50) {
				                 
										this.isflag=0
				                    } else if (subY < -50) {
				                    
										this.isflag=1
				                    }
				                }
								},
		onPageScroll(e) {
			//section
	/*
		let	_a=this.checklist[this.a]
		let	_b=this.checklist[(this.a+1)]
		console.log(e.scrollTop)
			console.log(this.b)

		  if(e.scrollTop>(this.b) && e.scrollTop <((_a+this.b+_b))&&this.isflag==1)
		  {		  
			console.log('jinlaile')
				 this.isSpdActive=this.a
				 this.a++ 
				this.b=this.b+_a	  	  	  
		  }	  else if(e.scrollTop<(this.b) &&e.scrollTop>(this.b-_a) &&this.isflag==0)
		  {	 
			  console.log('当前位置'+this.a);
			  		 this.isSpdActive=this.a
					  this.a--
					  	this.b=this.b-_a	 
		  }
	
		 */
		},
      // 富文本添加列表边框样式
      replaceContent(content) {
        // console.log(content)
        if (content) {
          content = content.replace(/<img/gi, '<img class="imgColor" ')
          return content;
        } else {
          return null;
        }
      },
	  toStoreIntro(item) {
	    uni.navigateTo({
	      url: '/myPackageA/pages/storeIntro/storeIntro?businessId=' +
	        item.bussinessId,
	    })
	  },
      // 跳转到雪道详情页面
      toSkiRoadDetail(id) {
        uni.navigateTo({
          url: '/myPackageA/pages/skiRoadDetail/skiRoadDetail?trailId=' + id
        })
      },
      // 获取所有雪道信息
      trailList() {
        let _this = this
        let param = {
          slopeId: _this.slopeId,
        }
        wx.request({
          url: _this.$httpApi.install.trailList,
          method: 'GET',
          data: param,//待放开
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.trailAllList = res.data.rows
              // 获取到所有的雪道列表，再分初中高级
              _this.getTrailTypeList()
            }
          },
        })
      },
      // 分初中高级雪道
      getTrailTypeList() {
        let trailList = this.trailAllList
        trailList.forEach(item => {
          // 图片拆分下，如果是多张图的话变成数组
          if (item.photo) {
            item.photo = item.photo.split(',')
          }
          if (item.level == 1) {
            this.juniorRoadList.push(item)
          } else if (item.level == 2) {
            this.midRoadList.push(item)
          } else if (item.level == 3) {
            this.seniorRoadList.push(item)
          }
        })
      },
      // 获取当前雪场,自营的商家列表
      getBusinessList(typeId) {
        let _this = this
        let param = { //待放开
          slopeId: _this.slopeId,
          pageSize: 2,
          pageNum: 1,
          bussinessType: typeId,
          roleFlag: 'snow_filed_child'
        }
        wx.request({
          url: _this.$httpApi.install.businessList,
          method: 'GET',
          data: param,
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.getIntroOrList(typeId, res.data.rows)
            }
          },
        })

      },
      // 根据获取的数据，提取出相对应的富文本或者数据
      getIntroOrList(typeId, list) {

        if (typeId == 4) {
          list.forEach(item => {
            if (item.bussinessIntroduce) {
              this.travelIntroList.push(item.bussinessIntroduce)
            }
          })
        } else if (typeId == 6) {
          // 雪具富文本
          list.forEach(item => {
            if (item.bussinessIntroduce) {
              this.skiEquipIntroList.push(item.bussinessIntroduce)
            }
          })
        } else if (typeId == 5) {
          // 教练教学列表
          this.othersList = list
          this.getTag(list)
        } else if (typeId == 9) {
          // 其他服务富文本
          list.forEach(item => {
            if (item.bussinessIntroduce) {
              this.otherIntroList.push(item.bussinessIntroduce)
            }
          })
        }
      },
      // 获取酒店标签
      getTag(list) {
        console.log(list)
        if (list.length > 0) {
          list.forEach(item => {
            if (item.tag !== null) {
              console.log('标签来了' + item.tag)
              item.tag = item.tag.split(',')
              item.childTag = item.tag.slice(1)
            } else {
              item.tag = []
              item.childTag = []
            }
          })
        }
      },
      // 获取雪场详情信息
      getSnowPackIntro() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getSlopeIntro + _this.slopeId,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.slopeIntro = res.data.data
              // _this.getAutoHeight()
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      // 跳转到go分类列表页
      toChildPage(item) {
        uni.navigateTo({
          url: '/myPackageA/pages/easyClearOthers/easyClearOthers?type=' + item + '&slopeId=' + this.slopeId
        })
      },
      // 雪场介绍点击收起展开
      showTag() {
        this.flag = !this.flag;
      },
      // 交通方式点击收起展开
      showTravelTag() {
        this.travelFlag = !this.travelFlag;
      },
      // 其他服务点击收起展开
      showOthersTag() {
        this.othersFlag = !this.othersFlag;
      },
      // 租赁点击收起展开
      showEquipTag() {
        this.equipFlag = !this.equipFlag;
      },
      // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
      getScrollW() {
        const query = uni.createSelectorQuery().in(this);
        query.select('.tab-scroll').boundingClientRect(data => {
          // 拿到 scroll-view 组件宽度
          this.contentScrollW = data.width
        }).exec();
        query.selectAll('.tab-scroll_item').boundingClientRect(data => {
          let dataLen = data.length;
          for (let i = 0; i < dataLen; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            this.category[i].left = data[i].left;
            //  scroll-view 子元素组件宽度
            this.category[i].width = data[i].width
          }
        }).exec()
      },
      // 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
      chenked(index, id) {
        console.log(index, id)
        this.isSpdActive = Number(index);
        this.scrollLeft = 0;
        for (let i = 0; i < index - 1; i++) {
          console.log(this.category[i].width)
          this.scrollLeft += 70
        };
        console.log(this.scrollLeft)
        const _this = this
        // this.$nextTick 保证当前isTabChange 为true后执行代码
        // 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
        this.$nextTick(() => {
          // _this.currentTab = item.index
          uni.createSelectorQuery().select(id).boundingClientRect(data => {
            uni.createSelectorQuery().select('.spd-tab-content').boundingClientRect(res => {
              console.log(data, res)
              const scrollTop = data.top - res.top // 获取差值
              console.log(data.top, res.top)
              const skewY = -15 // 偏移
              // 页面开始进行滚动到目标位置
              uni.pageScrollTo({
                scrollTop: scrollTop + skewY,
                duration: 300,
                complete: function() {
                  const timer = setTimeout(() => {
                    // _this.isTabChange = false // 关闭
                    clearTimeout(timer)
                  }, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
                }
              });
            }).exec()
          }).exec()
        })
      },
      // swiper滑动时，获取其索引，也就是第几个
      change(e) {
        const {
          current
        } = e.detail;
        this.currentindex = current;
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },

    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }

  .imgColor {
    max-width: 100%;
    height: auto;
  }
</style>
<style lang="scss">
  .no-data-box {
    padding: 10rpx 20rpx;
    font-size: 24rpx;
    color: gray;
  }
  .op {
    opacity: 0;
  }

  .snowPackDetail-content {
    position: absolute;

    .nav {
      position: fixed;
      z-index: 99;
      width: 100%;
      align-items: center;
      padding: 20rpx 0;
      width: 100%;
      background: #F8FAFE;

      .tab-scroll {
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        padding-left: 30rpx;
        padding-right: 30rpx;

        .tab-scroll_box {
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          box-sizing: border-box;

          .spd-active {
            background: #303030;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            color: #FFFFFF !important;
          }

          .tab-scroll_item {
            flex-shrink: 0;
            padding: 10rpx 20rpx;
            display: flex;
            justify-content: center;
            font-size: 24rpx;
            color: #A4A4A4;
          }
        }
      }
    }


    .spd-tab-content {
      margin-top: 90rpx;
      padding: 0 30rpx;

      .section {
        width: 690rpx;
        padding: 30rpx 20rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 30rpx;

        .top {
          .title {
            padding-left: 16rpx;
            font-size: 32rpx;
            color: #303030;
          }

          .split {
            width: 650rpx;
            height: 2rpx;
            margin-top: 30rpx;
            background: rgba(145, 164, 178, 0.2)
          }
        }

        .content_progress {
          margin-top: 30rpx;

        }

        // 营业时间
        .kfsj-box {
          font-size: 24rpx;
          color: #595959;
          margin-left: 20rpx;
        }

        // 门票信息
        .mpxx-box {
          font-size: 24rpx;
          color: #595959;
          margin-left: 20rpx;
        }

        .show-or-noshow {
          width: 100%;
          text-align: center;
          font-size: 24rpx;
          color: #5D87ED;
        }

        .xxjsActive {
          height: auto !important;
          overflow: visible !important;
        }

        .xxjs-height {
          height: 200rpx;
        }

        .xxjs-box,
        .travel-list,
        .other-list,
        .equip-list {
          // height: 200rpx;
          overflow: hidden;
          line-height: 70rpx;
          position: relative;
          padding: 0 30rpx;

          .zhezhaoceng {
            width: 690rpx;
            height: 158rpx;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
            border-radius: 0rpx 0rpx 20rpx 20rpx;
            position: absolute;
            bottom: 0;
          }


        }

        // 联系电话
        .lxdh-box {
          font-size: 24rpx;
          color: #595959;
          margin-left: 20rpx;
        }

        // 地址信息
        .dzxx-box {
          font-size: 24rpx;
          color: #595959;
          margin-left: 20rpx;
        }

        // 雪道信息
        .snow-road-num {
          width: 650rpx;
          height: 167rpx;
          background: rgba(145, 164, 178, 0.05);
          border-radius: 17rpx 17rpx 17rpx 17rpx;
          position: relative;

          image {
            width: 650rpx;
            height: 132rpx;
          }

          .srn-title {
            font-size: 24rpx;
            font-weight: bold;
            color: #303030;
            position: absolute;
            top: 5rpx;
            left: 50%;
            transform: translateX(-50%);
          }

          .srn-road-title {
            position: absolute;
            top: 58rpx;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 60rpx;

            .junior-road,
            .mid-road,
            .senior-road {
              display: flex;
              flex-direction: column;

              .r-name {
                font-size: 18rpx;
                color: #595959;
              }

              .r-num {
                font-size: 18rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: bold;
                color: #303030;
              }

              .junior {
                position: relative;

                &::before {
                  position: absolute;
                  top: 8rpx;
                  left: -14rpx;
                  content: '';
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #88F79C;
                }
              }

              .mid {
                position: relative;

                &::before {
                  position: absolute;
                  top: 8rpx;
                  left: -14rpx;
                  content: '';
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #5D87ED;
                }
              }

              .senior {
                position: relative;

                &::before {
                  position: absolute;
                  top: 8rpx;
                  left: -14rpx;
                  content: '';
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #303030;
                }
              }
            }
          }

          .srn-road-img {
            position: absolute;
            top: 117rpx;
            width: 100%;
            padding: 0 20rpx;
            display: flex;
          }

          .srn-road-rotate {
            display: flex;
            justify-content: space-between;
            padding: 0 46rpx;
            position: absolute;
            top: 135rpx;
            width: 100%;

            .rotate-item {
              font-size: 18rpx;
              font-weight: bold;
              color: #303030;
            }

          }
        }

        // 雪道图
        .snow-pack-img {
          margin-top: 30rpx;
          width: 650rpx;
          height: 339rpx;
          border-radius: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
          }
        }

        // 三种雪道
        .three-snowroad {
          .road-box {
            .road-title {
              font-size: 28rpx;
              font-weight: bold;
              color: #303030;
              margin-top: 30rpx;
              margin-left: 20rpx;
            }

            .road-list {
              margin-top: 20rpx;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;

              .roadl-item {
                &:nth-of-type(n+3) {
                  margin-top: 30rpx;
                }

                .rl-img {
                  width: 315rpx;
                  position: relative;

                  image {
                    width: 315rpx;
                    height: 236rpx;
                    background: #E3E3E3;
                    border-radius: 20rpx;
                  }

                  .rl-label {
                    position: absolute;
                    bottom: 20rpx;
                    right: 10rpx;
                    font-size: 24rpx;
                    color: #88F79C;
                    padding: 5rpx 19rpx;
                    background-color: #303030;
                    border-radius: 20rpx;

                  }
                }

                .rl-title {
                  font-size: 24rpx;
                  color: #595959;
                  margin-left: 20rpx;
                  margin-top: 10rpx;
                }
              }
            }

          }
        }

        // 更多
        .jtfs-title,
        .xjzl-title,
        .jljx-title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .jtfs-sibt-more {
            width: 32rpx;
            height: 32rpx;
            background: #BCC0C5;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

            image {
              width: 20rpx;
              height: 20rpx;
            }
          }
        }

        // 雪具样式
        .xjys-box {
          .road-list {
            margin-top: 20rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .roadl-item {
              &:nth-of-type(n+3) {
                margin-top: 30rpx;
              }

              .rl-img {
                width: 315rpx;
                position: relative;

                image {
                  width: 315rpx;
                  height: 236rpx;
                  background: #E3E3E3;
                  border-radius: 20rpx;
                }

                .rl-label {
                  position: absolute;
                  bottom: 20rpx;
                  right: 10rpx;
                  font-size: 24rpx;
                  color: #88F79C;
                  padding: 5rpx 19rpx;
                  background-color: #303030;
                  border-radius: 20rpx;
                }
              }

              .rl-title {
                font-size: 24rpx;
                color: #595959;
                margin-left: 20rpx;
                margin-top: 10rpx;
              }
            }
          }
        }

        // 教练教学
        .jljx-box {
          background-color: transparent;

          .hotel-box {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .hotel-item {
              background: #FFFFFF;
              padding-bottom: 30rpx;
              border-radius: 20rpx;
              position: relative;

              .is-self-employed {
                position: absolute;
                z-index: 99;
                right: 0;
                top: 0;
                width: 105rpx;
                height: 35rpx;
                background: linear-gradient(270deg, #FF3434 0%, #FFA163 100%);
                border-radius: 0rpx 19rpx 0rpx 19rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                  width: 24rpx;
                  height: 24rpx;

                }

                .ise-title {
                  font-size: 22rpx;
                  font-family: Source Han Sans CN, Source Han Sans CN;
                  font-weight: 400;
                  color: #FFFFFF;
                }
              }

              .ht-img {
                width: 335rpx;
                height: 353rpx;
                background: #D6D6D6;
                border-radius: 20rpx 20rpx 0rpx 0rpx;
                position: relative;

                image {
                  width: 100%;
                  height: 100%;
                  border-radius: 20rpx 20rpx 0rpx 0rpx;
                }

                .hi-distance {
                  position: absolute;
                  bottom: 10rpx;
                  left: 10rpx;
                  padding: 5rpx 17rpx;
                  background: #303030;
                  border-radius: 18rpx 18rpx 18rpx 18rpx;

                  font-size: 24rpx;
                  color: #88F79C;
                }
              }

              .hi-content {
                padding-left: 16rpx;

                .hi-name {
                  font-size: 24rpx;
                  font-weight: bold;
                  margin-top: 10rpx;
                  color: #464646;
                }

                .hi-grade {
                  margin-top: 10rpx;
                  width: 78rpx;
                  height: 30rpx;
                  background: #EFF1F4;
                  border-radius: 18rpx 18rpx 18rpx 18rpx;
                  font-size: 20rpx;
                  color: #FF4E00;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .hi-label {
                  display: flex;
                  margin-top: 10rpx;

                  .label-item {
                    background: #EFF1F4;
                    border-radius: 18rpx 18rpx 18rpx 18rpx;
                    font-size: 20rpx;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    color: #91A4B2;
                    padding: 4rpx 16rpx;
                    margin-right: 10rpx;
                  }
                }
              }
            }
          }
        }

      }
    }
  }
</style>